<template>
	<!-- 项目设备生产进度 -->
	<div style="height:3000px">
		<v-card>
			<v-card-title>
				<v-row class="mt-2">
					<v-col cols="12" md="2">
						<v-text-field label="项目号" v-model="query.projectcode" dense outlined>
						</v-text-field>
					</v-col>
					<v-col cols="12" md="2">
						<v-btn depressed color="primary" @click="loadPages">查询</v-btn>
						<v-btn class="ml-3" depressed color="primary" @click="refreshLoadPages">
							重置</v-btn>
					</v-col>
				</v-row>
			</v-card-title>
			<v-card-text>
				<v-data-table :headers="productionOrderHeaderList" :items="productionOrderDataList" small fixed-header
					item-key="id" dense class="text-no-wrap" loading-text="正在加载请稍等......"
					:loading="productionOrderLoading" :options.sync="productionOrderOptions" show-expand single-expand
					:footer-props="vuetifyDefaultPage" :server-items-length="productionOrderTotalCount"
					@item-expanded="expandedMasterOrderItemEvent">
					<template v-slot:expanded-item="{ headers, item }">

						<td :colspan="headers.length">
							<v-alert text color="blue-grey" class="text-center">进度详情</v-alert>
							<v-stepper v-model="e1">
								<v-stepper-header>
									<v-stepper-step :rules="[() => orderKAILIUnfinishedCount<=0]" :complete="e1 > 1" step="1">
										<span v-if="orderKAILIUnfinishedCount>0">
											工单开立(<a style="color: red;">未完成:{{orderKAILIUnfinishedCount}}</a>)
										</span>
										<span v-else>
											工单开立
										</span>

									</v-stepper-step>
									<v-divider></v-divider>

									<v-stepper-step :rules="[() => orderDAYINUnfinishedCount<=0]" :complete="e1 > 2" step="2">
										<span v-if="orderDAYINUnfinishedCount>0">
											工单打印(<a style="color: red;">未完成:{{orderDAYINUnfinishedCount}}</a>)
										</span>
										<span v-else>
											工单打印
										</span>
									</v-stepper-step>
									<v-divider></v-divider>

									<v-stepper-step :rules="[() => orderRequestMaterialUnfinishedCount<=0]" :complete="e1 > 3" step="3">
										<span v-if="orderRequestMaterialUnfinishedCount>0">
											工单领料(<a style="color: red;">未领料:{{orderRequestMaterialUnfinishedCount}}</a>)
										</span>
										<span v-else>
											工单领料
										</span>
									</v-stepper-step>
									<v-divider></v-divider>

									<v-stepper-step :rules="[() => orderpostUnfinishedCount<=0]" :complete="e1 > 4" step="4">
										<span v-if="orderpostUnfinishedCount>0">
											生产过账(<a style="color: red;">未领料:{{orderpostUnfinishedCount}}</a>)
										</span>
										<span v-else>
											生产过账
										</span>
									</v-stepper-step>
									<v-divider></v-divider>

									<v-stepper-step :rules="[() => orderQAUnfinishedCount<=0]" :complete="e1 > 5" step="5">

										<span v-if="orderQAUnfinishedCount>0">
											质检(<a style="color: red;">未通过:{{orderQAUnfinishedCount}}</a>)
										</span>
										<span v-else>
											质检
										</span>
									</v-stepper-step>
									<v-divider></v-divider>

									<v-stepper-step :rules="[() => orderInStorageUnfinishedCount<=0]" :complete="e1 > 6" step="6">
										<span v-if="orderInStorageUnfinishedCount>0">
											入库(<a style="color: red;">未通过:{{orderInStorageUnfinishedCount}}</a>)
										</span>
										<span v-else>
											入库
										</span>
									</v-stepper-step>
									<v-divider></v-divider>

									<v-stepper-step :rules="[() => orderOutListUnfinishedCount<=0]" :complete="e1 > 7" step="7">
										<span v-if="orderOutListUnfinishedCount>0">
											发货出库(<a style="color: red;">未发货出库:{{orderOutListUnfinishedCount}}</a>)
										</span>
										<span v-else>
											发货出库
										</span>
									</v-stepper-step>
								<!-- 	<v-divider></v-divider>
 -->
								<!-- 	<v-stepper-step :complete="e1 > 8" step="8">
										完结
									</v-stepper-step> -->
								</v-stepper-header>

								<v-stepper-items>
									<v-stepper-content step="1">
										<v-card class="mb-12">
											<v-card-text>
												<v-data-table :headers="orderKAILIHeaderList" :items="orderKAILIList"
													small fixed-header item-key="id" dense class="text-no-wrap"
													loading-text="正在加载请稍等......" :footer-props="vuetifyDefaultPage">
													<template v-slot:item.kaili="{ item }">
														<a :style="item.type==null? 'color: red;':'green;'">
															{{item.type==null?'未开立':'已开立'}}</a>
													</template>
												</v-data-table>
											</v-card-text>
											<v-card-actions>
												<v-spacer></v-spacer>
												<v-btn color="primary" @click="e1 = 8">
													上一步
												</v-btn>
												<v-btn color="primary" @click="e1 = 2">
													下一步
												</v-btn>
											</v-card-actions>
										</v-card>



									</v-stepper-content>

									<v-stepper-content step="2">
										<v-card class="mb-12">
											<v-card-text>
												<v-data-table :headers="orderDAYINHeaderList" :items="orderDAYINList"
													small fixed-header item-key="id" dense class="text-no-wrap"
													loading-text="正在加载请稍等......" :footer-props="vuetifyDefaultPage">
													<template v-slot:item.cardcode="{ item }">
														<a :style="item.cardcode==null? 'color: red;':'green;'">
															{{item.cardcode==null?'未生成流程卡':item.cardcode}}</a>
													</template>
												</v-data-table>
											</v-card-text>
											<v-card-actions>
												<v-spacer></v-spacer>
												<v-btn color="primary" @click="e1 = 1">
													上一步
												</v-btn>
												<v-btn color="primary" @click="e1 = 3">
													下一步
												</v-btn>
											</v-card-actions>
										</v-card>
									</v-stepper-content>

									<v-stepper-content step="3">
										<v-card class="mb-12">
											<v-card-text>
												<v-data-table :headers="orderRequestMaterialHeaderList"
													:items="orderRequestMaterialList" small fixed-header item-key="id"
													dense class="text-no-wrap" loading-text="正在加载请稍等......"
													:footer-props="vuetifyDefaultPage">
													<template v-slot:item.iscreaterequestorder="{ item }">
														<a
															:style="item.iscreaterequestorder==null||item.iscreaterequestorder==false? 'color: red;':'green;'">
															{{item.iscreaterequestorder==null||item.iscreaterequestorder==false?'未领料':'已领料'}}</a>
													</template>
												</v-data-table>
											</v-card-text>
											<v-card-actions>
												<v-spacer></v-spacer>
												<v-btn color="primary" @click="e1 = 2">
													上一步
												</v-btn>
												<v-btn color="primary" @click="e1 = 4">
													下一步
												</v-btn>
											</v-card-actions>
										</v-card>
									</v-stepper-content>

									<v-stepper-content step="4">
										<v-card class="mb-12">
											<v-card-text>
												<v-data-table :headers="orderpostHeaderList" :items="orderpostList"
													small fixed-header item-key="id" dense class="text-no-wrap"
													loading-text="正在加载请稍等......" :footer-props="vuetifyDefaultPage">
													<template v-slot:item.statusname="{ item }">
														<a
															:style="item.status!=null&&item.status>50? 'color: green;':'red;'">
															{{item.status!=null&&item.status>50?item.statusname:'过账未完成'}}</a>
													</template>
												</v-data-table>
											</v-card-text>
											<v-card-actions>
												<v-spacer></v-spacer>
												<v-btn color="primary" @click="e1 = 3">
													上一步
												</v-btn>
												<v-btn color="primary" @click="e1 = 5">
													下一步
												</v-btn>
											</v-card-actions>
										</v-card>
									</v-stepper-content>

									<v-stepper-content step="5">
										<v-card class="mb-12">
											<v-card-text>
												<v-data-table :headers="orderQAHeaderList" :items="orderQAList" small
													fixed-header item-key="id" dense class="text-no-wrap"
													loading-text="正在加载请稍等......" :footer-props="vuetifyDefaultPage">
													<template v-slot:item.qapass="{ item }">
														<a :style="item.qapass? 'color: green;':'red;'">
															{{item.qapass?'质检通过':'未通过'}}</a>
													</template>
												</v-data-table>
											</v-card-text>
											<v-card-actions>
												<v-spacer></v-spacer>
												<v-btn color="primary" @click="e1 = 4">
													上一步
												</v-btn>
												<v-btn color="primary" @click="e1 = 6">
													下一步
												</v-btn>
											</v-card-actions>
										</v-card>

									</v-stepper-content>

									<v-stepper-content step="6">
										<v-card class="mb-12">
											<v-card-text>
												<v-data-table :headers="orderInStorageHeaderList"
													:items="orderInStorageList" small fixed-header item-key="id" dense
													class="text-no-wrap" loading-text="正在加载请稍等......"
													:footer-props="vuetifyDefaultPage">
													<template v-slot:item.statusname="{ item }">
														<a
															:style="item.status!=null&&item.status>60? 'color: green;':'red;'">
															{{item.status!=null&&item.status>60?item.statusname:'未入库'}}</a>
													</template>
												</v-data-table>
											</v-card-text>
											<v-card-actions>
												<v-spacer></v-spacer>
												<v-btn color="primary" @click="e1 = 5">
													上一步
												</v-btn>
												<v-btn color="primary" @click="e1 = 7">
													下一步
												</v-btn>
											</v-card-actions>
										</v-card>
									</v-stepper-content>

									<v-stepper-content step="7">
										<v-card class="mb-12">
											<v-card-text>
												<v-data-table :headers="orderOutHeaderList" :items="orderOutList" small
													fixed-header item-key="id" dense class="text-no-wrap"
													loading-text="正在加载请稍等......" :footer-props="vuetifyDefaultPage">
													<template v-slot:item.statusname="{ item }">
														<a
															:style="item.status!=null&&item.status>=110? 'color: green;':'red;'">
															{{item.status!=null&&item.status>=110?item.statusname:'未发货'}}</a>
													</template>
												</v-data-table>
											</v-card-text>
											<v-card-actions>
												<v-spacer></v-spacer>
												<v-btn color="primary" @click="e1 = 6">
													上一步
												</v-btn>
												<v-btn color="primary" @click="e1 = 8">
													下一步
												</v-btn>
											</v-card-actions>

										</v-card>


									</v-stepper-content>
<!-- 
									<v-stepper-content step="8">
										<v-card class="mb-12" color="grey lighten-1" height="200px"></v-card>

										<v-btn color="primary" @click="e1 = 7">
											上一步
										</v-btn>

									</v-stepper-content> -->
								</v-stepper-items>
							</v-stepper>
						</td>
					</template>
				</v-data-table>
			</v-card-text>
		</v-card>
	</div>

</template>

<script>
	import {
		mapActions
	} from 'vuex'
	export default {
		name: 'production_task_beyond',
		components: {},
		data: () => ({
			query: {
				projectcode: '',
				name: '',
			},
			parmaterEnum: ['OrderMomStatus'],
			productionOrderStatusItems: [],
			productionOrderHeaderList: [],
			productionOrderDetailHeaderList: [],
			productionOrderDataList: [],
			productionOrderTotalCount: 0,
			productionOrderLoading: true,
			productionOrderOptions: { //页数
				page: 1,
				//每页行数
				itemsPerPage: 10
			},
			vuetifyDefaultPage: {
				'items-per-page-text': '每页个数',
				'items-per-page-options': [10, 20, 50, 100, 200]
				// 'items-per-page-all-text': '100'
			},
			
			orderKAILIHeaderList: [],
			orderKAILIList: [],
			orderKAILIUnfinishedCount: 0,


			orderDAYINHeaderList: [],
			orderDAYINList: [],
			orderDAYINUnfinishedCount: 0,

			orderRequestMaterialHeaderList: [],
			orderRequestMaterialList: [],
			orderRequestMaterialUnfinishedCount: 0,

			orderpostHeaderList: [],
			orderpostList: [],
			orderpostUnfinishedCount: 0,

			orderQAHeaderList: [],
			orderQAList: [],
			orderQAUnfinishedCount: 0,

			orderInStorageHeaderList: [],
			orderInStorageList: [],
			orderInStorageUnfinishedCount: 0,

			orderOutHeaderList: [],
			orderOutList: [],
			orderOutListUnfinishedCount: 0,
			e1:1
		}),
		watch: {
			productionOrderOptions: {
				handler() {
					this.loadPages()
				},
				deep: true
			},

		},
		created() {
			this.loadproductionOrderHeaderList()

		},
		methods: {

			refreshLoadPages() {
				this.query.projectcode = ''
				this.query.name = ''

			},
			//加载加工件
			async loadPages() {
				this.productionOrderLoading = true
				var response = await this.$httpRequest({
					url: `MES/MESProductionProcess/QueryPage?projectcode=${this.query.projectcode}&pageNumber=${this.productionOrderOptions.page}&pageSize=${this.productionOrderOptions.itemsPerPage}`,
					method: 'get',
				})
				if (response.status == 1) {
					this.productionOrderDataList = response.data.result
					this.productionOrderTotalCount = response.data.pagination.totalRecords
					this.productionOrderLoading = false
				} else {
					this.$message.error(response.info)
				}
			},
			async expandedMasterOrderItemEvent(project) {
				console.log(project)
				if (project.value) {
					var response = await this.$httpRequest({
						url: `MES/MESProductionProcess/QueryOne?projectcode=${project.item.projectcode}`,
						method: 'get',
					})

					if (response.status == 1) {
						this.el = response.data.currentProcessNode
						this.orderKAILIList = response.data.orderKAILIList
						this.orderKAILIUnfinishedCount = response.data.orderKAILIUnfinishedCount

						this.orderDAYINList = response.data.orderDAYINList
						this.orderDAYINUnfinishedCount = response.data.orderDAYINUnfinishedCount

						this.orderRequestMaterialList = response.data.orderRequestMaterialList
						this.orderRequestMaterialUnfinishedCount = response.data.orderRequestMaterialUnfinishedCount

						this.orderpostList = response.data.orderpostList
						this.orderpostUnfinishedCount = response.data.orderpostUnfinishedCount

						this.orderQAList = response.data.orderQAList
						this.orderQAUnfinishedCount = response.data.orderQAUnfinishedCount

						this.orderInStorageList = response.data.orderInStorageList
						this.orderInStorageUnfinishedCount = response.data.orderInStorageUnfinishedCount

						this.orderOutList = response.data.orderOutList
						this.orderOutListUnfinishedCount = response.data.orderOutListUnfinishedCount

						
					}
				}
			},
			//加工件头信息
			loadproductionOrderHeaderList() {
				this.productionOrderHeaderList = [{
						text: '项目号',
						value: 'projectcode',
						align: 'center',
						filterable: true,
					},
					{
						text: '项目名称',
						value: 'projectname',
						align: 'center',
						filterable: true,
					},
					{
						text: '客户编码',
						value: 'customercode',
						align: 'center',
						filterable: true,
					},
					{
						text: '客户名称',
						value: 'customername',
						align: 'center',
						filterable: true,
					},
					{
						text: '交期',
						value: 'deliverydate',
						align: 'center',
						filterable: true,
					},
					{
						text: '描述',
						value: 'description',
						align: 'center',
						filterable: true,
					}
				]

				//工单开立的头
				this.orderKAILIHeaderList = [{
						text: '图号',
						value: 'piccode',
						align: 'center',
						filterable: true,
					},
					{
						text: '名称',
						value: 'name',
						align: 'center',
						filterable: true,
					},
					{
						text: '类型',
						value: 'typename',
						align: 'center',
						filterable: true,
					},
					{
						text: '数量',
						value: 'totalcount',
						align: 'center',
						filterable: true,
					},
					{
						text: '单位',
						value: 'unit',
						align: 'center',
						filterable: true,
					},
					{
						text: '工单开立状态',
						value: 'kaili',
						align: 'center',
						filterable: true,
					},
				]
				//工单打印的头
				this.orderDAYINHeaderList = this.orderKAILIHeaderList.filter(r => r.value != 'kaili')
				this.orderDAYINHeaderList.push({
					text: '流程卡号',
					value: 'cardcode',
					align: 'center',
					filterable: true,
				})

				this.orderRequestMaterialHeaderList = this.orderDAYINHeaderList.filter(r => r.value != 'cardcode')
				this.orderRequestMaterialHeaderList.push({
					text: '是否领取物料',
					value: 'iscreaterequestorder',
					align: 'center',
					filterable: true,
				})

				this.orderpostHeaderList = this.orderRequestMaterialHeaderList.filter(r => r.value !=
					'iscreaterequestorder')
				this.orderpostHeaderList.push({
					text: '工单是否过账',
					value: 'statusname',
					align: 'center',
					filterable: true,
				})

				this.orderQAHeaderList = this.orderpostHeaderList.filter(r => r.value !=
					'statusname')
				this.orderQAHeaderList.push({
					text: '是否质检通过',
					value: 'qapass',
					align: 'center',
					filterable: true,
				})

				this.orderInStorageHeaderList = this.orderQAHeaderList.filter(r => r.value !=
					'qapass')
				this.orderInStorageHeaderList.push({
					text: '是否入库',
					value: 'statusname',
					align: 'center',
					filterable: true,
				})

				this.orderOutHeaderList = this.orderInStorageHeaderList.filter(r => r.value !=
					'statusname')
				this.orderOutHeaderList.push({
					text: '是否发货出库',
					value: 'statusname',
					align: 'center',
					filterable: true,
				})

			},

		}

	}
</script>

<style>
</style>
